<template>
  <div>
    <el-drawer
      :title="title"
      :before-close="beforeClose"
      :visible.sync="visible"
      :direction="direction"
      custom-class="demo-drawer"
      ref="drawer"
      :size="size"
      close-on-press-escape
      :destroy-on-close="destroyOnClose"
      :withHeader="withHeader"
      :append-to-body="appendToBody"
      :show-close="showClose"
    >
      <div class="demo-drawer__content">
        <div class="demo-drawer__content--body">
          <slot></slot>
        </div>
        <div v-if="!readonly && !noFooter" class="demo-drawer__footer">
          <el-button
            size="small"
            type="primary"
            @click="submit"
            :loading="loading"
            >{{ loading ? "提交中" : submitText }}</el-button
          >
          <el-button size="small" @click="cancelForm">{{
            cancelText
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "BaseDrawer",
  props: {
    submitText: {
      type: String,
      default: "确 定",
    },
    cancelText: {
      type: String,
      default: "取 消",
    },
    title: {
      type: String,
      default: "显示",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "25%",
    },
    withHeader: {
      type: Boolean,
      default: true,
    },
    appendToBody: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    direction: {
      type: String,
      default: "rtl",
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    noFooter: Boolean,
    readonly: Boolean,
  },

  data() {
    return {
      dialog: false,
      loading: false,
    };
  },

  mounted() {},

  methods: {
    open() {
      this.loading = false;
      this.dialog = true;
    },
    submit() {
      if (this.loading) {
        return;
      }
      // 给父组件抛出事件
      this.$emit("submit");
    },
    beforeClose() {
      this.loading = false;
      this.dialog = false;
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      this.$emit("cancelForm");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header {
  font-size: 14px;
  color: #333;
  // border-bottom: 1px rgb(188, 209, 235) solid;
  padding: 0px 20px;
  margin-bottom: 0px;
  line-height: 46px;
  height: 46px;
  background-color: #f8f8f8;
}
.el-drawer__wrapper {
  ::v-deep .demo-drawer {
    top: 20px;
    bottom: 20px;
    height: auto;
    border-radius: 4px;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
    .el-drawer__body {
      padding: 0;
      overflow: hidden;
      .demo-drawer__content {
        display: flex;
        flex-direction: column;
        height: 100%;
        &--body {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: auto;
        }
        .demo-drawer__footer {
          display: flex;
          justify-content: center;
          padding: 15px;
          box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
          .el-button {
            width: 100px;
          }
          .el-button--default {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>
